<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
		<style>
			body * {
				margin: 10px;
				border: 1px solid blue;
			}
		</style>
	</head>
	<body>
		<!--
    event.target —— 是引发事件的“目标”元素，它在冒泡过程中不会发生变化。
    this === event.currentTarget —— 是“当前”元素，其中有一个当前正在运行的处理程序。
    -->
		<form>
			FORM
			<div>
				DIV
				<p>P</p>
			</div>
		</form>

		<script>
			const form = document.querySelector('form')

			form.addEventListener('click', function (event) {
				console.log('触发冒泡的目标元素', event.target)
				console.log('触发冒泡的当前元素', this, event.currentTarget)
			})
		</script>
	</body>
</html>
